<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="header">
            <h1>头部</h1>
        </div>
        <div class="left">
            <p>
                <ul>
                    <li><a href="#/foo">Go Foo</a></li>
                    <li><a href="#/bar">Go Bar</a></li>
                    <!-- 
                        官方推荐：
                        通过 router-link 标签会默认渲染出 a 标签来
                        其中 通过 to属性指定跳转链接，不用带上 #  号
                    -->
                    <li><router-link to="/foo">Go to Foo</router-link> </li>
                    <li><router-link to="/bar">Go to Bar</router-link></li>
                </ul>
            </p>
        </div>
        <div class="main">
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>

    <script>
        // 1. 定义组件
        const Foo = {
            template: '<div> 我是 Foo 组件</div>'
        }
        const Bar = {
            template: '<div> 我是 Bar 组件</div>'
        }

        // 2. 配置路由表： 当点击指定url时，显示对应的那个组件
        const router = new VueRouter({
            routes: [ // 注意单词，是routes 不是 router
                {path: '/foo', component: Foo},
                {path: '/bar', component: Bar}
            ]
        })

        // 3. 将路由器注入到实例中
        var vm = new Vue({
            el:'#app',
            router, // router: router
            
            data:{

            }
        })
    </script>
</body>
</html>